<template>
	<view class="activity-seat">
		<view style="background-color: #2F75FA; height: 160rpx;"></view>
		
		<view class="top d-inline-block">
			<view class="goods d-flex" style="margin-top: -90rpx;">
				<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
				<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
					<view>
						<view class="name">{{ data.name }}</view>
						<view class="status">{{ data.status }}</view>
					</view>
					<view class="flex-between">
						<price :value="data.price" color="#FF4105"></price>
						<view class="rest">
							剩余：{{ data.rest }}名
						</view>
					</view>
				</view>
			</view>
			
			<view class="section_5">
				<view style="margin-bottom: 30rpx;">活动时间：2022/05/01-05/05</view>
				<view>活动地址：上海市和平饭店</view>
			</view>
			
			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>
			
			<view class="flex-center text-center">
				<view class="progress flex-align">
					<view>
						<view>选座开始</view>
						<view>12.12 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>选座结束</view>
						<view>12.13 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>活动开始</view>
						<view>12.13 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>活动结束</view>
						<view>12.13 15:00</view>
					</view>
				</view>
			</view>
			
			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>
			
			<view class="notify flex-align" style="padding-bottom: 30rpx;">
				<view class="flex-align" style="margin-right: 20rpx;">
					<u-text text="通" color="#323030" bold ></u-text>
					<u-text text="告" color="#feb307" bold></u-text>
				</view>
				<view>12号~15号停车场不对外开放,请各位车主注意...</view>
			</view>
		</view>
		
		<u-gap height="20rpx" bgColor="#F3F3F3"></u-gap>
		
		<view class="rase-detail">
			<view class="item">
				<view class="title">主办单位</view>
				<view class="value">骏熙泰羽</view>
			</view>
			<view class="item">
				<view class="title">承办单位</view>
				<view class="value">骏熙泰羽</view>
			</view>
			<view class="item">
				<view class="title">协办单位</view>
				<view class="value">骏熙泰羽</view>
			</view>
			<view class="item">
				<view class="title">支持单位</view>
				<view class="value">骏熙泰羽</view>
			</view>
		</view>
		
		<u-gap height="20rpx" bgColor="#F3F3F3"></u-gap>
		
		<u-tabs
			:list="tabsList"
			lineColor="#4786fe"
			:activeStyle="{
				color: '#4786fe'
			}"
			:inactiveStyle="{
				color: '#c2c1c1' 
			}"
			:lineWidth="16"
			:current="currentTab"
			@click="onClickTab"
		/>
		
		<view class="bottom-add-btn flex-align">
			<view class="flex-center flex-column" style="margin-right: 50rpx; white-space: nowrap; font-size: 24rpx;">
				<u-icon name="phone-fill" color="#333" size="24"></u-icon>
				<view>店铺客服</view>
			</view>
			<u-button text="立即选座" shape="circle" @click="show = true" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
		<con-alert :show="show" @close="close" isFooter @click="buy" >
			<view class="popup-content">
				<view class="goods d-flex">
					<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
					<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
						<view class="name">{{ data.name }}</view>
						<view>
							<view class="status">{{ data.status }}</view>
							<price :value="data.price" color="#FF4105"></price>
						</view>
					</view>
				</view>
				
				<view class="choose-category">
					<view style="margin-bottom: 30rpx;">选择赛事场地</view>
					
					<view class="d-flex flex-wrap" style="margin-left: -30rpx;">
						<view
							v-for="(item, index) in category"
							:key="index"
						>
							<u-tag
								:text="item.text"
								:bgColor="chooseCategory === index ? 'rgba(47, 117, 250, 0.05)' : '#EFEFEF'"
								:borderColor="chooseCategory === index ? '#2F75FA' : 'rgba(0,0,0,0)'"
								:color="chooseCategory === index ? '#2F75FA' : item.disabled ? '#fff' : '#333'"
								:disabled="item.disabled"
								@click="chooseCategory = index"
							/>
						</view>
					</view>
				</view>
			</view>
		</con-alert>
	</view>
</template>

<script>
import conAlert from "@/components/com-alert/com-alert.vue"
export default {
	components:{
		conAlert
	},
	data() {
		return {
			show: false,
			data: {
				name: 'CBA骏熙泰羽',
				status: '进行中',
				price: 888,
				rest: 8
			},
			currentTab: 0,
			tabsList: [
				{ name: '选座须知' },
				{ name: '活动介绍' },
				{ name: '精彩瞬间' }
			],
			category: [
				{
					text: '2021-12-15 星期五 12:00'
				},
				{
					text: '2021-12-16 星期六 12:00'
				}
			],
			chooseCategory: 0
		}
	},
	methods: {
		close(){
			this.show = false
		},
		onClickTab({ index }) {
			this.currentTab = index;
		},
		buy() {
			if (uni.getStorageSync("openid") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				uni.reLaunch({
					url: '/pages/personal/personal'
				})
			} else {
				uni.navigateTo({
					url: '/pages/activity-seat/seat-selection/choose-area/choose-area'
				});
			}
			
		}
	}
}
</script>

<style lang="scss" scoped>
.activity-seat {
	padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	
	.top {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 0 30rpx;
		margin-top: -30rpx;
		width: 100%;
		
		.name,
		.status {
			color: #fff;
		}
	}
	
	.goods {
		.name {
			font-size: 28rpx;
		}
		
		.status {
			font-size: 24rpx;
		}
		
		.rest {
			color: #BEBEBE;
			font-size: 22rpx;
		}
	}
	
	.section_5 {
		margin-top: 30rpx;
		padding: 30rpx 31rpx 31rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 23rpx;
		border-radius: 5rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16512007100218816344.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.progress {
		font-size: 24rpx;
		white-space: nowrap;
		
		.line {
			width: 40rpx;
			height: 6rpx;
			background: #2F75FA;
			border-radius: 10px;
			margin: 0 10rpx;
		}
	}
	
	.notify {
		font-size: 24rpx;
	}
	
	.rase-detail {
		padding: 30rpx;
		font-size: 30rpx;
		
		.item {
			& + .item {
				margin-top: 30rpx;
			}
		}
		
		.title {
			color: #6f6f6f;
			margin-bottom: 10rpx;
		}
	}
	
	.popup-content {
		
		.choose-category {
			height: 27vh;
			margin-top: 50rpx;
			
			/deep/.u-tag {
				margin-left: 30rpx;
				margin-bottom: 30rpx;
			}
		}
	}
}
</style>
